import React from 'react';
import { View, Text } from 'react-native';
import styles from './styles';

class Flex extends React.Component {
  state = {
    width: 0,
    height: 0,
  }
  static navigationOptions = {
    title: 'Flex布局',
    text: '',
  };
  onLayout = (event) => {
    this.setState({
      width: event.nativeEvent.layout.width,
      height: event.nativeEvent.layout.height,
    });
  }
  render() {
    return (
      <View style={styles.container} onLayout={this.onLayout}>
        <View style={styles.firstRow}>
          <View style={styles.test1} />
          <View style={styles.test2} />
          <View style={styles.test3} />
        </View>
        <View style={styles.secondRow}>
          <View style={styles.textView}><Text>宽度：{this.state.width}</Text></View>
          <View style={styles.textView}><Text>高度：{this.state.height}</Text></View>
          <View style={styles.textView}><Text>方向：{this.state.width > this.state.height ? '横向' : '纵向'}</Text></View>
        </View>
      </View>
    )
  }
}

export default Flex;
